import React, { Component } from 'react';
import { TradingDirectC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button } from 'antd';

class TradingDirectCTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      t3: undefined,
      businessType: '1',
    };

    setTimeout(() => {
      this.setState({
        t3: 'calc',
        loading: false,
      });
    }, 2000);
  }
  change = () => {
    this.setState({
      businessType: '9',
    });
  };
  render() {
    return (
      <div style={{ width: '800px' }}>
        <div>
          <h2>无初始化值</h2>
          <Form>
            <TradingDirectC form={this.props.form} dataIndex={'t1'} businessType='7' appType='0' onChange={(e) => console.log(e)} />
          </Form>
          <h2>现金指令（非指令和簿记中用到的指令类型</h2>
          <Form>
            <TradingDirectC form={this.props.form} dataIndex={'t1'} businessType='18' onChange={(e) => console.log(e)} />
          </Form>
        </div>
        <div className='sectionItem'>
          <h2>同步加载初始化值</h2>
          <Form>
            <TradingDirectC form={this.props.form} dataIndex={'t2'} businessType='5' initialValue={'2'} onChange={(e) => console.log(e)} />
          </Form>
        </div>
        <div className='sectionItem'>
          <h2>异步加载初始化值</h2>
          <Form>
            <TradingDirectC
              form={this.props.form}
              dataIndex={'t3'}
              disabled={true}
              businessType='8'
              initialValue={this.state.t3}
              onChange={(e) => console.log(e)}
              loading={this.state.loading}
            />
          </Form>
        </div>
        <div className='sectionItem'>
          <h2>点击按钮模拟因业务触发更改</h2>
          <Form>
            <TradingDirectC
              form={this.props.form}
              dataIndex={'t4'}
              businessType={this.state.businessType}
              onChange={(e) => console.log(e)}
              onRef={(ref) => {
                this.setState({ TradingDirectC: ref });
              }}
            />
          </Form>
          <Button onClick={this.change}>更改选项</Button>
        </div>
        <div className='sectionItem'>
          <h2>场外基金在簿记中的详情</h2>
          <Form>
            <TradingDirectC
              title='申请类型'
              form={this.props.form}
              dataIndex={'t5'}
              businessType={5}
              appType='2'
              disabled={true}
              initialValue={'3'}
              onChange={(e) => console.log(e)}
            />
            <TradingDirectC
              title='交易方向'
              form={this.props.form}
              dataIndex={'t6'}
              businessType={1} // 银行间现券
              appType='3' // 行为交收
              onChange={(e) => console.log(e)}
            />
          </Form>
        </div>
      </div>
    );
  }
}

export default Form.create()(TradingDirectCTest);
